<template>
  <div class="lost-find">
    <!--    失物登记-->
    <div class="register" v-if="false">
      <router-link tag="a" :to="{name: 'lostRegister'}" class="content">
        <div class="left">
          <img src="../../assets/images/lost-find/lost-register.png" width="40" height="40" alt="">
          <div class="text">
            <div class="title">失物登记</div>
            <div class="tip">登记您丢失的物品，我们帮您找</div>
          </div>
        </div>
        <i class="iconfont">&#xe651;</i>
      </router-link>

    </div>

    <!--    失物招领列表-->
    <div class="lost-list">
      <div class="lost-title">失物招领列表</div>
      <div class="lost-tip">若您丢失的物品没有显示在此列表，可直接拨打咨询电话<a class="phone" style="margin-left: 5px;" @click="call('0374-2997775', '公交失物招领')">0374-2997775</a></div>

      <ul class="card-list">
        <li class="lost-card" v-for="(item, index) in dataList" :key="index">
          <div class="lost-card-title">{{item.content}}</div>
          <div class="lost-card-tip"><label>拾获地址</label><span>{{item.line}}路</span></div>
          <div class="lost-card-tip"><label>拾获时间</label><span>{{item.createtime}}</span></div>
          <div class="lost-card-tip"><label>领取地址</label><span>{{item.address}}</span></div>
          <div class="lost-card-tip"><label>联系电话</label><span class="phone" @click="call(item.tel, item.address)">{{item.tel}}</span></div>
        </li>
      </ul>

    </div>

  </div>

</template>
<!--失物招领-->
<script>
  export default {
    name: 'lostFind',

    data () {
      return {
        dataList: []
      }
    },

    mounted () {
      this.$load.show({
        mask: true
      })
      this.fetchData()
    },

    methods: {
      // 获取失物招领列表数据
      fetchData () {
        this.$http.post('/api/qrCode/getLoseList').then(res => {
          if (res.status === 200) {
            console.log(res)
            this.dataList = res.data
          } else {
            this.$toast.show(res.msg)
          }
          this.$load.hide()
        })
      },

      // 拨打电话
      call (phoneNum, name) {
        callPhone(phoneNum, name, name)
      }

    }
  }
</script>

<style scoped lang="scss">
  @import "~styles/extends.scss";

  .lost-find {
    .register {
      padding: 12px 16px 20px;
      border-bottom: solid 8px $theme-page-bg;

      .content {
        border-radius: 8px;
        border: 1px solid rgba(239, 239, 240, 1);
        padding: 16px;
        @extend %flex-justify-center-between;

        .left {
          @extend %flex-justify-start;

          .text {
            .title {
              font-size: 16px;
              font-family: PingFangSC-Medium;
              font-weight: bold;
              color: $theme-black;
              line-height: 22px;
            }

            .tip {
              font-size: 12px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: $theme-gray;
              line-height: 17px;
            }
          }
        }

        i {
          font-size: 20px;
          line-height: normal;
          color: $theme-black;
        }
      }
    }

    .lost-list {
      padding: 20px 16px 14px;

      .title {
        font-size: 18px;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        color: $theme-black;
        line-height: 25px;
      }

      .tip {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: $theme-gray;
        line-height: 20px;
      }

      .lost-title {
        @extend .title;
        padding-bottom: 6px;
      }

      .lost-tip {
        @extend .tip;
        padding-bottom: 16px;
        border-bottom: solid 1px $theme-border-color;
      }

      .card-list {
        .lost-card {
          padding: 16px;
          margin-top: 16px;
          background: url("../../assets/images/lost-find/lost-property.png") no-repeat;
          background-size: 100% 100%;

          &-title {
            @extend .title;
          }

          &-tip {
            @extend .tip;
            padding-top: 12px;

            span {
              margin-left: 12px;
              color: $theme-black;
            }
          }
        }
      }
      .phone {
        color: $theme-blue !important;
      }
    }

  }

</style>
